<template>
  <div class="custom-calendar">
    <div class="calendar-header">
      <span class="calendar-arrow" @click="prevMonth">
        <img src="@/assets/icon/chevron-left.svg" alt="" />
      </span>
      <span class="calendar-title" @click="calendarTimeShow = !calendarTimeShow"
        >{{ calendarYear }}-{{ calendarMonthStr }}</span
      >
      <span class="calendar-arrow" @click="nextMonth">
        <img src="@/assets/icon/chevron-right.svg" alt="" />
      </span>

      <div class="calendar-time" v-if="calendarTimeShow">
        <div class="calendar-time-Year">
          <div v-for="value in YearList"  @click="yearFun(value)":class="year == value?'check':''">{{ value }}</div>
        </div>
        <div class="calendar-time-MonthStr">
          <div v-for="value in MonthStrList" @click="MonthFun(value)" :class="month == value?'check':''">{{ value * 1 }}月</div>
        </div>
      </div>
    </div>
    <div class="calendar-table">
      <div class="calendar-row calendar-week">
        <span v-for="w in weekList" :key="w" class="calendar-week-cell">{{
          w
        }}</span>
      </div>
      <div v-for="(row, rIdx) in calendarRows" :key="rIdx" class="calendar-row">
        <span
          v-for="(cell, cIdx) in row"
          :key="cIdx"
          :class="[
            'calendar-cell',
            {
              'calendar-cell-other': cell.other,
              'calendar-cell-today': cell.isToday,
              'calendar-cell-selected': cell.selected,
            },
          ]"
          @click="selectCell(cell)"
        >
          {{ cell.day }}
        </span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue';
import dayjs from 'dayjs';

const props = defineProps({
  modelValue: Date,
});
const emit = defineEmits(['update:modelValue']);
const calendarTimeShow = ref(false);
const today = new Date();



const calendarYear = ref(
  props.modelValue ? props.modelValue.getFullYear() : today.getFullYear()
);
const calendarMonth = ref(
  props.modelValue ? props.modelValue.getMonth() : today.getMonth()
);
const weekList = ['日', '一', '二', '三', '四', '五', '六'];
const MonthStrList = ref<any[]>([
  '01',
  '02',
  '03',
  '04',
  '05',
  '06',
  '07',
  '08',
  '09',
  '10',
  '11',
  '12',
]);
const YearList = ref<any[]>([
  '2025',
  '2026',
  '2027',
  '2028',
  '2029',
  '2030',
  '2031',
  '2032',
  '2033',
  '2034',     
  '2045',
  '2046',
  '2047',
]);

function getDays(year: number, month: number, selectedDate?: Date) {
  const firstDay = new Date(year, month, 1);
  const lastDay = new Date(year, month + 1, 0);
  const prevLastDay = new Date(year, month, 0);
  const days: {
    day: number;
    other: boolean;
    isToday: boolean;
    selected: boolean;
    date: Date;
  }[] = [];
  // 上月补位
  for (let i = firstDay.getDay() - 1; i >= 0; i--) {
    const d = new Date(year, month - 1, prevLastDay.getDate() - i);
    days.push({
      day: prevLastDay.getDate() - i,
      other: true,
      isToday: false,
      selected: false,
      date: d,
    });
  }
  // 本月
  for (let d = 1; d <= lastDay.getDate(); d++) {
    const isToday =
      year === today.getFullYear() &&
      month === today.getMonth() &&
      d === today.getDate();
    const isSelected =
      selectedDate &&
      year === selectedDate.getFullYear() &&
      month === selectedDate.getMonth() &&
      d === selectedDate.getDate();
    days.push({
      day: d,
      other: false,
      isToday,
      selected: !!isSelected,
      date: new Date(year, month, d),
    });
  }
  // 下月补位
  const remain = 42 - days.length;
  for (let i = 1; i <= remain; i++) {
    const d = new Date(year, month + 1, i);
    days.push({
      day: i,
      other: true,
      isToday: false,
      selected: false,
      date: d,
    });
  }
  // 分行
  const rows = [];
  for (let i = 0; i < 6; i++) {
    rows.push(days.slice(i * 7, (i + 1) * 7));
  }
  return rows;
}

const calendarRows = ref(
  getDays(calendarYear.value, calendarMonth.value, props.modelValue)
);
const calendarMonthStr = computed(() =>
  String(calendarMonth.value + 1).padStart(2, '0')
);
const year = ref<any>(calendarYear.value);
const month = ref<any>(calendarMonthStr.value);

const yearFun = (value: any) => {
  year.value = value;
};
const MonthFun = (value: any) => {
  month.value = value;
  calendarTimeShow.value = false;
  calendarYear.value = year.value * 1;
  calendarMonth.value = value * 1 - 1;

  let time = year.value + '-' + month.value + '-01' + ' 00:00:00';
  let date = new Date(time);
  emit('update:modelValue', date);
  
  calendarRows.value = getDays(
    calendarYear.value,
    calendarMonth.value,
    date
  );

};
function prevMonth() {
  if (calendarMonth.value === 0) {
    calendarYear.value--;
    calendarMonth.value = 11;
  } else {
    calendarMonth.value--;
  }
  calendarRows.value = getDays(
    calendarYear.value,
    calendarMonth.value,
    props.modelValue
  );
}
function nextMonth() {
  if (calendarMonth.value === 11) {
    calendarYear.value++;
    calendarMonth.value = 0;
  } else {
    calendarMonth.value++;
  }
  calendarRows.value = getDays(
    calendarYear.value,
    calendarMonth.value,
    props.modelValue
  );
}
function selectCell(cell: any) {
  if (cell.other) return;
  // let time = dayjs(cell.date).format('YYYY-MM-DD')
  emit('update:modelValue', cell.date);
}
watch(
  () => props.modelValue,
  (val) => {
    if (val) {
      calendarYear.value = val.getFullYear();
      calendarMonth.value = val.getMonth();
      calendarRows.value = getDays(
        calendarYear.value,
        calendarMonth.value,
        val
      );
    }
  }
);
</script>

<style scoped lang="scss">
.custom-calendar {
  margin: 8px 16px 0 16px;
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
  user-select: none;
}
.calendar-header {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 600;
  color: #222;
  padding: 12px 0 8px 0;
  position: relative;
  .calendar-time{
    position: absolute;
    width: 240px;
    height: 234px;
    left: 4px;
    top: 50px;
    display: flex;
    align-items: center;
    border-radius: 5px;
    box-shadow: 0 0 10px 1px #c7c7c7;
    padding:15px 12px;
    background: #fff;
    font-size: 14px;
    color: #666;
    .calendar-time-Year{
      margin-right: 4px;
      width: 49%;
      height: 100%;
      text-align: center;
      overflow-y: auto;
      >div{
        width: 100%;
        line-height: 24px;
        border-radius: 3px 3px 3px 3px;
      }
      >.check{
        background: rgba(22,173,164,0.08);
      }
      >div:hover{
        background: #F3F3F3;
      }
    }
    
    .calendar-time-MonthStr{
      width: 49%;
      margin-left:2% ; 
      height: 100%;
      overflow-y: auto;
      text-align: center;
      >div{
        width: 100%;
        line-height: 24px;
        border-radius: 3px 3px 3px 3px;
      }
      >.check{
        background: rgba(22,173,164,0.08);
      }
      >div:hover{
        background: #F3F3F3;
      }
    }
  }
}
.calendar-title {
  margin: 0 10px;
  font-size: 16px;
  font-weight: 600;
  color: #222;
}
.calendar-arrow {
  font-size: 18px;
  color: #16ada4;
  cursor: pointer;
  padding: 0 8px;
  border-radius: 4px;
  transition: background 0.2s;
}
.calendar-arrow:hover {
  background: #e6f7f5;
}
.calendar-table {
  width: 100%;
  margin: 0 auto;
}
.calendar-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.calendar-week {
  color: #bdbdbd;
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 2px;
}
.calendar-week-cell {
  flex: 1;
  text-align: center;
  padding: 6px 0;
}
.calendar-cell {
  flex: 1;
  text-align: center;
  font-size: 14px;
  color: #222;
  height: 36px;
  line-height: 36px;
  border-radius: 6px;
  margin: 2px 0;
  background: none;
  transition: background 0.2s, color 0.2s;
}
.calendar-cell-other {
  color: #d3d3d3;
}
.calendar-cell-today {
  background: #e6f7f5;
  color: #16ada4;
  font-weight: 600;
}
.calendar-cell-selected {
  background: rgba(22, 173, 164, 0.08);
}
</style>
<style>
.calendar-time-Year::-webkit-scrollbar {
      width: 1 !important;
      background: #eee;
    }
    .calendar-time-MonthStr::-webkit-scrollbar {
      width: 1 !important;
      background: #eee;

    }
</style>